<template>
  <div class="tags">
    <el-tag
      v-for="(item,index) in tags"
      :key="item.url"
      :closable=" item.url != '/home' "
      :effect="$route.path==item.url ? 'dark' : 'plain' "
      @click="changeMenu(item)"
      @close="handleClost(item, index)"
      size="small">
      {{ item.menuName }}
    </el-tag>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
    export default {
        name: "CommonTag",
        data(){
            return{}
        },
        //计算属性，类似于创建一个属性：tags
        computed:{
            ...mapState({
                tags:state => state.tab.tagList
            })
        },
        methods:{
            ...mapMutations(['closeTag']),
            /*点击标签跳转的功能*/
            changeMenu(item){
                if (this.$route.path != item.url && !(this.$route.path ==="/home" && item.url ==="/")){
                    //this.$router.push({ name: item.nameMenu});
                    this.$router.push(item.url);
                }
                this.$store.commit("selectMenu", item);
            },
            //点击标签删除的功能
            handleClost(item, index){
                //删除标签
                this.closeTag(item);
                const length = this.tags.length;
                if (this.$route.path != item.url){
                    return ;
                }
                //如果是是最后一个标签
                if (index==length){
                    this.$router.push(this.tags[index-1].url);
                }else{
                    this.$router.push({
                        path: this.tags[index].url
                    });
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.tags{
  padding: 20px;
  .el-tag{
    margin-right: 15px;
    cursor: pointer;
  }
}
</style>
